import { CheckCircleOutlined, StopOutlined, SyncOutlined } from '@ant-design/icons';
import { Tag } from 'antd';
import { PayStatus, ParkingOrderStatus } from '../../types.d';

const mapPayStatusText = (payStatus: PayStatus) => {
  switch (payStatus) {
    case PayStatus.FREE:
    case PayStatus.FULL_PAID:
      return '已完成';
    case PayStatus.NONE:
      return '进行中...';
    case PayStatus.WAITING:
      return '待支付...';
    case PayStatus.PARI_PAID:
      return '未付清';
    case PayStatus.REFUNDED:
      return '已退款';
    case PayStatus.WAIT_REFUND:
      return '待退款';
    default:
      return '未知状态';
  }
};
const mapTagColor = (status: ParkingOrderStatus, isEnded: boolean) => {
  if (status !== ParkingOrderStatus.NORMAL) return 'error';
  else if (isEnded) return '#87d068';
  else return '#108ee9';
};
export default (props: {
  carOut?: boolean;
  status?: ParkingOrderStatus;
  payStatus?: PayStatus;
  isEnded?: boolean;
  canceled?: boolean;
}) => {
  const { status, payStatus, isEnded = false, carOut, canceled = false } = props;
  if (status === undefined || payStatus === undefined)
    return (
      <Tag icon={<SyncOutlined spin />} color="#aaa">
        加载中...
      </Tag>
    );
  if (canceled)
    return (
      <Tag color="#555" icon={<StopOutlined />}>
        已作废
      </Tag>
    );
  return (
    <Tag icon={isEnded ? <CheckCircleOutlined /> : undefined} color={mapTagColor(status, isEnded)}>
      {carOut ? mapPayStatusText(payStatus) : '停车中...'}
    </Tag>
  );
};
